<template>
	<view class="body">
		<myHeader :title="title"></myHeader>

		<!-- 如果是团队负责人可修改 -->
		<view class="m-20" v-if="currentRoleCode.includes('fl-leader')">
			<view class="mt-40">
				<uni-forms-item class="text-gray" label="团队名称" name="theme">
					<uni-easyinput type="text" v-model="teamName" placeholder="请输入会议主题" />
				</uni-forms-item>
			</view>
			<view class="item mt-40">
				<view class="label  text-gray">组长</view>
				<view class="picker">
					<view class="picker">
						<picker @change="bindPickerChange($event,leaderCandidates)" :range="leaderCandidates"
							:range-key="'realName'">
							<view class="uni-input">{{leaderCandidates[leaderCandidateIdx].realName}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="mt-20">
				<view class="mt-20">
					<view class="mt-20 text-gray">组员</view>
					<view class="item mt-20">
						<view class="ml-40" v-for="(item,index) in members" :key="index">{{item.text}}</view>
					</view>
				</view>
				<hr class="mt-20" style="background-color: #E5E5E5;height: 1px;border:none">
				<view class="mt-40" style="font-weight: bold;	">重新分配组员</view>
				<view class="item mt-20">
					<view>
						<uni-data-checkbox v-model="members" :multiple="true" :localdata="membersCandidates">
						</uni-data-checkbox>
					</view>

					</checkbox-group>
				</view>
			</view>
			<view class="mt-40 ">
				<button class="bg-red text-white" @click="submit">修改</button>
			</view>
		</view>
		<!-- 如果是组员或者组长可查看 -->
		<view class="m-20"  v-if="!currentRoleCode.includes('fl-leader')">
			<view class="item mt-40">
				<view class="label text-gray">团队名称</view>
				<view class="picker">{{data.teamName}}
				</view>
			</view>
			<view class="item mt-40">
				<view class="label text-gray">组长</view>
				<view class="picker">{{data.leaderName}}
				</view>
			</view>
			<hr class="mt-20" style="background-color: #E5E5E5;height: 1px;border:none">
			<view class="mt-20">
				<view class="mt-20 text-gray">组员</view>
				<view class="item mt-20">
					<view class="ml-40" v-for="(item,index) in members" :key="index">{{item.text}}</view>
				</view>
				<hr class="mt-20" style="background-color: #E5E5E5;height: 1px;border:none">
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from '../../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {
		data() {
			return {
				title: '团队详情',
				search: '',
				btnPattern: {
					buttonColor: '#e20909'
				},
				leaderCandidates: [],
				leaderCandidateIdx: 0,
				leaderId: '',
				membersCandidates: [],
				membersCandidateIdx: 0,
				// 当前用户角色
				currentRoleCode: [],
				// 从首页传入的对象
				data: {},
				members: [],
				teamName:''
			}
		},
		created() {
			this.getLoginUserRoles();
			this.getMembersByLeader();
			this.getLeaders();
			this.getMembers()
			this.teamName = this.data.teamName
			this.leaderId = this.data.leader
		},

		onLoad: function(option) {
			this.data = JSON.parse(option.data)
		},
		methods: {
			
			// 获取组员
			getMembers() {
				NetWorkTool.POSTFORM('/api/federation-teams-relation/union', {
					roleCode: 'fl-group-member',
					leader: this.data.leader,
				}, false).then(res => {
					for (let item of res) {
						let obj = {};
						obj.value = item.userId;
						obj.text = item.realName;
						this.membersCandidates.push(obj)
					}
				});
			},
			// 获取组长
			getLeaders() {
				this.leaderCandidates.unshift({
					userId: this.data.leader,
					realName: this.data.leaderName
				})
				NetWorkTool.POSTFORM('/api/federation-teams-relation/byRoleCodeUserInfo', {
					roleCode: 'fl-group-leader'
				}, false).then(res => {
					for (let item of res) {
						this.leaderCandidates.push(item)
					}
				});

			},
			// 通过组长id查询组员
			getMembersByLeader() {
				NetWorkTool.POSTFORM('/api/federation-teams-relation/byleaderGetMembers', {
						leader: this.data.leader
					}, false)
					.then(res => {
						for (let item of res) {
							this.members.push({
								text: item.memberName,
								value: item.memberId
							})
						}
					});
			},
			// 点击提交
			submit() {
				console.log(this.members)
				
				let arr = []
				for (let item of this.members) {
					if(item.value == undefined){
						if (this.members.length <= 0){
							uni.showToast({
								title: '请选择组员！',
								icon: 'none',
								during: 2000
							})
							return;
						}
						arr.push(item)
					} else {
						arr.push(item.value)
					}
				}
				let param = {
					"leader": this.leaderId,
					"members":arr.toString(),
					"teamName": this.teamName,
					"id":this.data.id
				}
				if (arr.length <=0){
					uni.showToast({
						title: '请选择组员！',
						icon: 'none',
						during: 2000
					})
					return;
				}
				NetWorkTool.POST('/api/federation-teams-relation/addTeam', param, true).then(res => {
					uni.showToast({
						title: "修改成功",
						duration: 2000,
					});
					uni.navigateTo({
						url: './teamIndex'
					})
				});
			},
			// 获取登录用户角色
			getLoginUserRoles() {
				let _this = this;
				uni.getStorage({
					key: 'user',
					success(e) {
						let arr = [];
						for (let item of e.data.role) {
							if (null != item.roleCode) {
								_this.currentRoleCode.push(item.roleCode)
								if (item.roleCode == 'fl-leader') {
									_this.isLeader = true;
								}
							}
						}
					}
				})
			},
			// 选中后
			bindPickerChange(e, arr, idx) {
				this.leaderCandidateIdx = e.target.value;
				this.leaderId = arr[this.leaderCandidateIdx].userId;
			
			},
		},
		components: {
			myHeader
		},
	}
</script>

<style scoped>
	@import url("/static/party_building/assets/style/federation.css");

	.item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.item .label {
		flex: 0 0 20%;
	}

	.item .picker {
		flex: 0 0 80%;
	}

	.item .row {
		flex: 0 0 25%;
	}
</style>
